<script setup>



</script>
<template>
  <div class="menu">
    <router-link class="menu-item" to="/manage">
      <IconBase fontSize="2.2rem">
        <ManageIcon />
      </IconBase>
      <span>项目管理</span>
    </router-link>
    <router-link class="menu-item" to="/agency">
      <IconBase fontSize="2.2rem">
        <TodoIcon />
      </IconBase>
      <span>待办事项</span>
    </router-link>
    <router-link class="menu-item" to="/helper">
      <IconBase fontSize="2.2rem">
        <HelperIcon />
      </IconBase>
      <span>智能助手</span>
    </router-link>

    <img class="bottom-image" src="../assets/image/homebuild.png" alt="">


  </div>
</template>


<style lang="scss" scoped>
$fontColor:#43475D;
$primaryColor:#147AD6;
$secondaryColor:#E0EAFF;
a{
  text-decoration: none;
  color:inherit;
}
.menu {
  height: 100%;
  // width: 26rem;
  background-color: #fff;
  padding: 2.4rem 1.6rem;
  font-size: 1.5rem;
  color: $fontColor;
  // overflow: hidden;
  font-style: normal;
  font-weight: 500;
  position: fixed;
  //阻止用户选中文字，否则会出现一些问题
  user-select:none;
  // box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
  &-item{
    padding: 1.36rem 1.92rem;
    display: flex;
    margin: 0.96rem 0;
    width: 16rem;
    height: 4.8rem;
    align-items: center;
    gap: 1.44rem;
    border-radius: 1rem;
    cursor: pointer;
    &:not(.router-link-active):hover{
      background: darken(#fff, 3);
      color: darken($fontColor, 5);
    }
  }
  &-group{
    height: 4.8rem;
    transition: height 0.6s;
  }
  &-subtitle + .group{
    height: 0;
    // display: none;
  }
  &-group:has(input:checked){
    height: calc(14.4rem + 4.8rem);
  }
  &-subtitle:has(input:checked) + .group{
    height: 14.4rem;
    display: block;
  }
  &-subtitle:has(input:checked) .vector{
    transition: transform 0.3s;
    transform: rotate(0);
  }
  
}
.group{
  margin-left: 1.6rem;
  padding: 0 1rem;
  transition: height 0.6s;
  overflow: hidden;
  z-index: 1;
  & > .menu-item {
    width: 12.8rem;
    height: 3.68rem;
    position: relative;
    font-size: 1.25rem;
    &::after{
      content: '';
      display: block;
      position: absolute;
      height: 130%;
      width: 1px;
      background: #CED5E1;
      left: -1rem;
    }
  }
  position: relative;
  z-index: 1;
}
.vector{
  margin-left: auto;
  transform: rotate(-180deg);
  transition: transform 0.3s;
}
.router-link-active{
  border-radius: 0.8rem;
  background: #147AD6;
  color: #fff;
  .group &{
    background: #E0EAFF;
    color: #147AD6;
    border-radius: 1rem;
  }
  &::after {
    background: #147AD6 !important;
    border-radius: 6px;
    width: 2px;
  }
}
.menu-group:has(.router-link-active) .menu-subtitle{
  border-radius: 0.8rem;
  background: #147AD6;
  color: #fff;
  
}
.bottom-image{
  position: absolute;
  bottom: 5%;
  right: 0;
  opacity: 0.4;
  z-index: -1;
  user-select: none;
  pointer-events: none;
}
</style>